<template>
  <div id="main" style="float:left;width:100%;height: 350px"></div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    tooltip: {
      type: Object,
      default: () =>{
        return {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        }
      }
    },
    legend: {
      type: Object,
      default: () =>{
        return {
          orient: 'vertical',
          right: 'top'
        }
      }
    },
    dataSeries: {
      type: Array,
      default: [
              { value: 1048, name: '搜索引擎' },
              { value: 735, name: '直接访问' },
              { value: 580, name: '邮件营销' },
              { value: 484, name: '联盟广告' },
              { value: 300, name: '视频广告' }
            ]
    }
  },
  data() {
    return {}
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main'))
      // 绘制图表
      myChart.setOption({
        title: this.title,
        tooltip: this.tooltip,
        legend: this.legend,
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '80%',
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: this.dataSeries
          }
        ]
      })
    }
  }
}
</script>
